<template>
  <div>
    <Vcode
      :show="isShow"
      @success="success"
      @close="close"
    />
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt/>
    </div>

    <div class="login" @keydown.enter="login">
      <el-form ref="form" :model="loginForm" :rules="rules" class="login-form" >
        <el-form-item prop="username">
          <el-input v-model="loginForm.account" clearable placeholder="请输入用户名" prefix-icon="fa fa-user-o"></el-input>
        </el-form-item>
        <el-form-item prop="password" >
          <el-input v-model="loginForm.password" show-password placeholder="请输入密码" prefix-icon="fa fa-key"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="15">
            <el-form-item prop="captcha">
              <el-input v-model="loginForm.captcha" clearable placeholder="请输入验证码" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <img style="height: 40px ;width: 100%"  :src="loginForm.src" @click="refreshCaptcha">
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item >
          <el-button round class="login-btn" @click="login">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
    </div>

</template>

<script>
import Vcode from 'vue-puzzle-vcode'
export default {
  name: 'login',
  components: {
    Vcode
  },
  data () {
    return {
      isShow: false,
      loginForm: {
        account: '',
        password: '',
        captcha: '',
        src: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 5, max: 5, message: '长度为5个字符', trigger: 'blur' }
        ]
      },
      imgSrc: require('../../assets/login_images/3.jpg')
    }
  },
  methods: {
    login: function () {
      if (this.loginForm.username === '') {
        this.$errorInfo('用户名不能为空')
      } else if (this.loginForm.password === '') {
        this.$errorInfo('密码不能为空')
      } else if (this.loginForm.captcha === '') {
        this.$errorInfo('验证码不能为空')
      } else {
        this.isShow = true
      }
    },
    // 用户通过了验证
    success (msg) {
      this.isShow = false // 通过验证后，需要手动隐藏模态框
      this.$api.login.login(this.loginForm).then((response) => {
        if (response.code === 200) {
          sessionStorage.setItem('username', this.loginForm.account) // 保存用户到本地会话
          this.$successInfo(response.message)
          this.$router.push('/').catch(r => {
            console.log(r)
          })
        } else {
          this.$errorInfo(response.message)
        }
      }).catch((error) => {
        console.log(error)
        this.$errorInfo('网络连接失败')
      })
    },
    // 用户点击遮罩层，应该关闭模态框
    close () {
      this.isShow = false
    },
    refreshCaptcha: function () {
      this.loginForm.src = 'http://localhost:8000/user/captcha.jpg?t=' + new Date().getTime()
    }

  },
  mounted () {
    this.refreshCaptcha()
  }
}
</script>

<style scoped lang="scss">
  .login{

    position: fixed;
    width: 350px;
    height: 350px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 250px auto;
    text-align: center;
    .login-btn{
      width: 100%;
    }

  }
  .background{
    width: 100%;
    height: 100%; /**宽高100%是为了图片铺满屏幕 */
    z-index: -1;
    position: fixed;
    top: 0px; /*这里是设置与顶部的距离*/
    left: 0px; /*这里是设置与左边的距离*/
    bottom: 0px;
    right: 0px;
  }

</style>
